import { Calc } from '@/api'
import { Button, Form, Input } from 'react-vant'
import { Helmet, useMutation } from 'umi'

export default function PageForm4() {
  const [form] = Form.useForm()

  // #计算
  const { mutate: calc, isLoading: isCalcLoading } = useMutation({
    mutationFn: Calc,
    onSuccess: (res) => {
      const { yyszb } = res
      form.setFieldValue('yyszb', yyszb)
    },
  })

  const handleSubmit = (values: any) => {
    calc({
      type: 4,
      data: {
        ...values,
      },
    })
  }

  return (
    <>
      <Helmet>
        <title>营收指标计算</title>
      </Helmet>

      <section className="relative p-4 min-h-screen">
        <Form
          initialValues={{
            yye: undefined,
          }}
          form={form}
          onFinish={handleSubmit}
          footer={(
            <footer className="mt-6">
              <Button round nativeType="submit" loading={isCalcLoading} type="primary" block>
                开始计算
              </Button>
            </footer>
          )}
        >

          <div className="overflow-hidden bg-white rounded-lg">
            <Form.Item
              labelWidth={120}
              label="开店总投入"
              name="kdztr"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入开店总投入" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="期望回本周期"
              name="qwhbzq"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入期望回本周期" suffix="月" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="每月固定开支"
              name="mygdkz"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入每月固定开支" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="综合毛利率"
              name="zhmll"
              rules={[
                {
                  type: 'number',
                  transform: value => Number(value),
                  min: 0.1,
                  max: 99.9,
                  message: '必须在0.1%到99.9%之间',
                },
              ]}
            >
              <Input clearable placeholder="请输入综合毛利率" suffix="%" />
            </Form.Item>
          </div>

          <div className="overflow-hidden mt-4 rounded-lg">
            <Form.Item
              labelWidth={120}
              label="月营收指标"
              name="yyszb"
            >
              <Input placeholder="待计算" readOnly suffix="元" className="font-bold" />
            </Form.Item>
          </div>

        </Form>
      </section>
    </>
  )
}
